<template>
  <div class="LiningAdminDetail">
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-width="100px"
      class="demo-ruleForm"
      size="mini"
    >
      <el-form-item label="品名" prop="product_name">
        <el-input
          placeholder="请输入品名"
          v-model="form.product_name"
        ></el-input>
      </el-form-item>
      <el-form-item label="款号" prop="type_no">
        <el-input
          placeholder="请输入款号"
          v-model="form.type_no"
          @blur="onBlur"
          :disabled="form.id"
        ></el-input>
      </el-form-item>
      <div class="objname" v-if="objname">
        <div>数加名称：{{ objname.type_name }}</div>
        <div>巨益名称：{{ objname.a_parts }}</div>
        <!-- <div>简称：{{objname.jy_name}}</div> -->
      </div>
      <el-form-item label="SKU" prop="sku_code">
        <el-input
          placeholder="请输入SKU"
          v-model="form.sku_code"
          v-if="form.id"
          :disabled="form.id"
        ></el-input>
        <div v-else>
          <el-checkbox
            v-if="list.length"
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <el-checkbox-group
            v-model="form.sku_code"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox
              v-for="(item, index) in list"
              :label="item"
              :key="index"
              >{{ item }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
      </el-form-item>
      <el-form-item label="执行标准" prop="executive_standard">
        <el-select
          v-model="form.executive_standard"
          placeholder="请选择"
          clearable
          filterable
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.title_des"
            :value="item.title"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="安全级别" prop="safety_category">
        <el-select
          v-model="form.safety_category"
          placeholder="请选择"
          clearable
          filterable
        >
          <el-option
            v-for="item in optionsjb"
            :key="item.id"
            :label="item.title"
            :value="item.title"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="面料1" prop="lining_one">
        <el-input
          placeholder="请输入面料1"
          v-model="form.lining_one"
        ></el-input>
      </el-form-item>
      <el-form-item label="面料2" prop="lining_two">
        <el-input
          placeholder="请输入面料2"
          v-model="form.lining_two"
        ></el-input>
      </el-form-item>
      <el-form-item label="面料3" prop="lining_three">
        <el-input
          placeholder="请输入面料3"
          v-model="form.lining_three"
        ></el-input>
      </el-form-item>
      <el-form-item label="面料4" prop="lining_four">
        <el-input
          placeholder="请输入面料4"
          v-model="form.lining_four"
        ></el-input>
      </el-form-item>
      <el-form-item label="面料5" prop="lining_five">
        <el-input
          placeholder="请输入面料5"
          v-model="form.lining_five"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  postAdminCodeSetTag,
  postAdminCodeGetTagLook,
  postAdminApiCodeGetTypenoSku,
  postAdminCodeAddTag,
  postAdminCodeGetTagcategory,
} from "@/api";
export default {
  data() {
    return {
      isIndeterminate: true,
      checkAll: false,
      objname: "",
      list: [],
      optionsjb: [],
      options: [],
      form: {
        product_name: "",
        type_no: "",
        sku_code: [],
        executive_standard: "",
        safety_category: "",
        lining_one: "",
        lining_two: "",
        lining_three: "",
        lining_four: "",
        lining_five: "",
      },
      rules: {
        product_name: [
          { required: true, message: "请输入品名", trigger: "blur" },
        ],
        type_no: [{ required: true, message: "请输入款号", trigger: "blur" }],
        sku_code: [{ required: true, message: "请输入SKU", trigger: "blur" }],
        executive_standard: [
          { required: true, message: "请选择执行标准", trigger: "blur" },
        ],
        // safety_category: [
        //   { required: true, message: "请选择安全级别", trigger: "blur" },
        // ],
      },
    };
  },
  mounted() {
    let id = this.$route.query.id;
    if (!id) {
      this.form = {
        product_name: "",
        type_no: "",
        sku_code: [],
        executive_standard: "",
        safety_category: "",
      };
    } else {
      this.postAdminCodeGetTagLook(id);
    }
    this.postAdminCodeGetTagcategory();
    this.postAdminCodeGetTagcategoryaqlb();
  },
  methods: {
    handleCheckAllChange(val) {
      this.form.sku_code = val ? this.list : [];
      this.isIndeterminate = false;
    },
    // 执行标准
    async postAdminCodeGetTagcategory() {
      let data = {
        types: 3,
        page: 1,
        size: 10000,
      };
      postAdminCodeGetTagcategory(data)
        .then((res) => {
          this.loading = false;
          console.log("采购列表", res);
          this.options = res.data;
          this.total = Number(res.total);
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 安全类别
    async postAdminCodeGetTagcategoryaqlb() {
      let data = {
        types: 4,
        page: 1,
        size: 10000,
      };
      postAdminCodeGetTagcategory(data)
        .then((res) => {
          this.loading = false;
          console.log("采购列表", res);
          this.optionsjb = res.data;
          this.total = Number(res.total);
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 款号获取SKU
    onBlur(e) {
      if (!this.form.id) {
        let type_no = this.form.type_no;
        if (type_no) {
          let obj = {
            type_no,
          };
          postAdminApiCodeGetTypenoSku(obj)
            .then((res) => {
              this.list = res.data;
              this.objname = res.res;
            })
            .catch((err) => {
              this.objname = "";
            });
        } else {
          this.$message.warning("请输入款号");
        }
      }
    },
    // 详情
    postAdminCodeGetTagLook(id) {
      let obj = {
        id,
      };
      postAdminCodeGetTagLook(obj).then((res) => {
        let data = res.data;
        let obj = {
          id: data.id,
          product_name: data.product_name,
          type_no: data.type_no,
          sku_code: data.sku_code || [],
          executive_standard: data.executive_standard,
          safety_category: data.safety_category,
          lining_one: data.lining_one,
          lining_two: data.lining_two,
          lining_three: data.lining_three,
          lining_four: data.lining_four,
          lining_five: data.lining_five,
        };
        this.form = obj;
      });
    },
    // 编辑
    submitForm(formName) {
      let that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (that.form.id) {
            that.postAdminCodeSetTag(that.form);
          } else {
            that.postAdminCodeAddTag(that.form);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 新增
    postAdminCodeAddTag(form) {
      postAdminCodeAddTag(form).then((res) => {
        this.$message.success("新增成功");
        this.$router.go(-1);
      });
    },
    // 修改
    postAdminCodeSetTag(form) {
      postAdminCodeSetTag(form).then((res) => {
        this.$message.success("修改成功");
        this.$router.go(-1);
      });
    },
    //
    handleCheckedCitiesChange(value) {
      console.log("value", value);
      // let checkedCount = value.length;
      // this.checkAll = checkedCount === this.cities.length;
      // this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
  },
};
</script>

<style lang="scss" scoped>
.objname {
  display: flex;
  font-size: 14px;
  color: #666;
  margin-left: 100px;
  margin-bottom: 20px;
  > div {
    margin-right: 20px;
  }
}
.LiningAdminDetail {
  margin-top: 20px;
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  /deep/ .el-input {
    width: 500px;
  }
}
</style>